<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<z-paging :scrollable="scrollableVal" ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
			<!-- 头部 -->
			<template slot="top">
				<u-navbar title="看板中心" leftIcon=" " :fixed="false"></u-navbar>
				<!--  v-if="userInfo.position_id == 10" -->
				<view class="tab-box" v-if="userInfo.position_id == 10">
					<view class="tab-box-content">
						<u-tabs
							:list="tabList"
							:itemStyle="{ height: '80rpx', flex: '1' }"
							:inactiveStyle="{ color: '#828A9D', fontSize: '28rpx' }"
							:activeStyle="{ color: '#3B75FF', fontSize: '28rpx' }"
							lineColor="#3B75FF"
							@change="tabActive"
						></u-tabs>
					</view>
				</view>
			</template>
			<!-- 内容 -->
			<view class="content">
				<u-transition :show="activeIdx == 0">
					<view class="statistics-box" v-show="activeIdx == 0">
						<!-- 1 -->
						<view class="item-box">
							<view class="search-box">
								<view class="search-flex" @click="showSelect('yearPicker')">
									<view class="search-label">{{ search.year ? search.year : '年份查询' }}</view>
									<view v-if="search.year" style="padding-right: 10rpx" @click.stop="delSelect('year')">
										<u-icon name="close-circle" size="26rpx"></u-icon>
									</view>
									<u-icon name="arrow-down" size="26rpx"></u-icon>
								</view>
								<view class="search-flex" @click="showSelect('userPicker')" v-if="[10, 1].includes(userInfo.position_id)">
									<view class="search-label">{{ search.user ? search.user.name : '客户经理' }}</view>
									<view v-if="search.user" style="padding-right: 10rpx" @click.stop="delSelect('user')">
										<u-icon name="close-circle" size="26rpx"></u-icon>
									</view>
									<u-icon name="arrow-down" size="26rpx"></u-icon>
								</view>
							</view>
							<view class="card-box">
								<view class="card-statistics">
									<view class="card-title">签约项目数</view>
									<view class="card-number">
										<image class="card-icon" src="@/static/images/statistics-2.png" mode=""></image>
										{{ t1Data.TotalNumberOfSignedProjects || 0 }}
									</view>
									<image class="card-bg" src="@/static/images/statistics-bg.png" mode="aspectFill"></image>
								</view>
								<view class="card-statistics">
									<view class="card-title">合同签约总额(元)</view>
									<view class="card-number">
										<image class="card-icon" src="@/static/images/statistics-1.png" mode=""></image>
										{{ t1Data.TotalContractAmount || 0 }}
									</view>
									<image class="card-bg" src="@/static/images/statistics-bg.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="statistics-e">
								<view class="statistics-tips">
									<span class="title">月度签约项目数</span>
								</view>
								<view style="width: 100%; height: 600rpx">
									<qiun-data-charts
										@getTouchStart="getTouchStart"
										@getTouchEnd="getTouchEnd"
										type="column"
										:canvas2d="true"
										:opts="ydqyxms.opts"
										:chartData="ydqyxms.chartData"
										:ontouch="true"
										:inScrollView="true"
										tooltipFormat="columnDemo"
										canvasId="doWixaOONiukOoYkCfHBNZdzedWyllOs"
									/>
								</view>
							</view>
							<view class="statistics-e">
								<view class="statistics-tips">
									<span class="title">月度签约金额趋势</span>
								</view>
								<view style="width: 100%; height: 600rpx">
									<qiun-data-charts
										@getTouchStart="getTouchStart"
										@getTouchEnd="getTouchEnd"
										type="area"
										:canvas2d="true"
										:opts="ydqyjeqs.opts"
										:chartData="ydqyjeqs.chartData"
										:ontouch="true"
										:inScrollView="true"
										tooltipFormat="areaDemo"
										canvasId="kVGFJFGNgAofZxamQZgVrdIsPMoyYDcE"
									/>
								</view>
							</view>
						</view>
						<!-- 2 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">实时项目汇总</span>
							</view>
							<zb-table
								:data="sTableData1"
								:columns="[
									{ name: 'account_manager_name', label: '客户经理', align: 'center', fixed: true },
									{ name: 'ToBeStarted', label: '待启动', align: 'center' },
									{ name: 'WaitForSurveySite', label: '待勘场', align: 'center' },
									{ name: 'SurveySiteMapping', label: '待勘场出图', align: 'center' },
									{ name: 'ProducingDesignDrawings', label: '待方案设计', align: 'center' },
									{ name: 'ToBeQuoted', label: '待报价', align: 'center' },
									{ name: 'InNegotiations', label: '洽谈中', align: 'center' },
									{ name: 'SignedContract', label: '已签约', align: 'center' },
									{ name: 'ToBeSettled', label: '待结算', align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
						</view>
						<!-- 3 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">签约情况统计</span>
								<view class="search-box">
									<view class="search-flex" @click="showSelect('timePicker')">
										<view class="search-label">{{ search.time ? search.time[0] + '/' + search.time[1] : '日期查询' }}</view>
										<view v-if="search.time" style="padding-right: 10rpx" @click.stop="delSelect('time')">
											<u-icon name="close-circle" size="26rpx"></u-icon>
										</view>
										<u-icon name="arrow-down" size="26rpx"></u-icon>
									</view>
								</view>
							</view>
							<zb-table
								:data="sTableData2"
								:columns="[
									{ name: 'TotalContractAmount', label: '合同签约总额', align: 'center', fixed: true },
									{ name: 'AverageAmountPerOrder', label: '单均金额', align: 'center' },
									{ name: 'NumberOfContractedProjects', label: '签约项目数', align: 'center' },
									{ name: 'NumberOfCirculationProjects', label: '流转项目数', align: 'center' },
									{ name: 'NumberOfNewProjectsAdded', label: '新增项目数', align: 'center' },
									{ name: 'NumberOfCancelledProjects', label: '取消项目数', align: 'center' },
									{ name: 'StatisticalSigningRate', label: '签约率', align: 'center' },
									{ name: 'StatisticalDiscountRate', label: '折扣率', align: 'center' },
									{ name: 'ProjectSettlementAmount', label: '项目结算数', align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
							<view class="statistics-tips" style="margin-top: 50rpx">
								<span class="title">各类型门店签约情况统计</span>
							</view>
							<zb-table
								:data="sTableData3"
								:columns="[
									{ name: 'project_type_name', label: '门店类型', align: 'center', fixed: true },
									{ name: 'ProjectTypeTotalContractAmount', label: '合同签约总额', align: 'center' },
									{ name: 'ProjectTypeProportionSignedAmount', label: '签约金额占比', align: 'center' },
									{ name: 'ProjectTypeAverageAmountPerOrder', label: '单均金额', align: 'center' },
									{ name: 'ProjectTypeNumberOfContractedProjects', label: '签约项目数', align: 'center' },
									{ name: 'ProjectTypeNumberOfCancelledProjects', label: '取消项目数', align: 'center' },
									{ name: 'ProjectTypeStatisticalSigningRate', label: '签约率', align: 'center' },
									{ name: 'ProjectTypeSigningTimeLimit', label: '签约时效(天)', align: 'center' },
									{ name: 'ProjectTypeStatisticalDiscountRate', label: '折扣率', align: 'center' },
									{ name: 'ProjectTypeProjectSettlementAmount', label: '项目结算数', align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
							<view class="statistics-tips" style="margin-top: 50rpx">
								<span class="title">客户经理业绩情况月度统计</span>
							</view>
							<zb-table
								:data="sTableData4"
								:columns="[
									{ name: 'account_manager_name', label: '客户经理', align: 'center', fixed: true },
									{ name: 'AMTotalContractAmount', label: '合同签约总额', align: 'center' },
									{ name: 'AMNumberOfContractedProjects', label: '签约项目数', align: 'center' },
									{ name: 'AMNumberOfCancelledProjects', label: '取消项目数', align: 'center' },
									{ name: 'AMStatisticalSigningRate', label: '签约率', align: 'center' },
									{ name: 'AMSigningTimeLimit', label: '签约时效(天)', align: 'center' },
									{ name: 'AMStatisticalDiscountRate', label: '折扣率', align: 'center' },
									{ name: 'AMProjectSettlementAmount', label: '项目结算数', align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
							<view class="statistics-tips" style="margin-top: 50rpx">
								<span class="title">取消项目类型统计</span>
							</view>
							<view style="width: 100%; height: 600rpx">
								<!-- :canvas2d="true"  -->
								<qiun-data-charts
									type="ring"
									:canvas2d="true"
									:inScrollView="true"
									:opts="qxxmlxtj.opts"
									:chartData="qxxmlxtj.chartData"
									canvasId="FPTYohGndHXOlZExfLslHXzULSJxcfeD"
								/>
							</view>
						</view>
						<!-- 4 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">待结算尾款情况统计</span>
							</view>
							<zb-table
								:data="sTableData5"
								:columns="[
									{ name: 'days', label: '账期', align: 'center', fixed: true },
									{ name: 'PTToBeSettledNum', label: '普通店项目数', align: 'center' },
									{ name: 'PTToBeSettledAmount', label: '普通店总金额', align: 'center' },
									{ name: 'TPToBeSettledNum', label: '特批店项目数', align: 'center' },
									{ name: 'TPToBeSettledAmount', label: '特批总金额', align: 'center' },
									{ name: 'SubtotalAmount', label: '小计', align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
						</view>
					</view>
				</u-transition>
				<u-transition :show="activeIdx == 1">
					<view class="statistics-box" v-show="activeIdx == 1">
						<!-- 1 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">施工中状态统计</span>
							</view>
							<view class="state-box">
								<view class="state-item" v-for="(item, idx) in t1Data" :key="idx">
									<view class="state-label">{{ item.name }}</view>
									<view class="state-value">{{ item.num }}</view>
								</view>
							</view>
						</view>
						<!-- 2 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">施工省份统计</span>
							</view>
							<view class="sort-box">
								<zb-table
									:data="gTableData1"
									:columns="[
										{ label: '名次', align: 'center', type: 'index' },
										{ name: 'short_name', label: '省份', align: 'center' },
										{ name: 'construction_num', label: '施工中', align: 'center' }
									]"
									:stripe="false"
									:fit="true"
									show-summary
									sum-text="合计"
									:summary-method="getSummaries"
								></zb-table>
							</view>
						</view>
						<!-- 3 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">工程经理施工统计</span>
							</view>
							<view class="sort-box">
								<zb-table
									:data="gTableData2"
									:columns="[
										{ label: '名次', align: 'center', type: 'index' },
										{ name: 'engineering_manager_name', label: '工程经理', align: 'center' },
										{ name: 'construction_num', label: '施工中', align: 'center' }
									]"
									:stripe="false"
									:fit="true"
									show-summary
									sum-text="合计"
									:summary-method="getSummaries"
								></zb-table>
							</view>
						</view>
						<!-- 4 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">完工项目数据</span>
								<view class="search-box">
									<view class="search-flex" @click="showSelect('typePicker')">
										<view class="search-label mdtype">{{ search.type ? search.type.name : '门店类型' }}</view>
										<view v-if="search.type" style="padding-right: 10rpx" @click.stop="delSelect('type')">
											<u-icon name="close-circle" size="26rpx"></u-icon>
										</view>
										<u-icon name="arrow-down" size="26rpx"></u-icon>
									</view>
									<view class="search-flex" @click="showSelect('timePicker')">
										<view class="search-label rqtime">{{ search.time ? search.time[0] + '/' + search.time[1] : '日期查询' }}</view>
										<view v-if="search.time" style="padding-right: 10rpx" @click.stop="delSelect('time')">
											<u-icon name="close-circle" size="26rpx"></u-icon>
										</view>
										<u-icon name="arrow-down" size="26rpx"></u-icon>
									</view>
								</view>
							</view>
							<view class="card2-box">
								<view class="card-statistics" style="background-color: #ffd6a6; color: #af6e1b">
									<view class="card-title">实际交付项目数</view>
									<view class="card-number">{{ t31Data.ActualDeliveryNum }}</view>
									<image class="card-bg" src="@/static/images/home-bg1.png" mode="aspectFill"></image>
								</view>
								<view class="card-statistics" style="background-color: #ffaeae; color: #b61515">
									<view class="card-title">应交付项目数</view>
									<view class="card-number">{{ t31Data.DeliverableNum }}</view>
									<image class="card-bg" src="@/static/images/home-bg2.png" mode="aspectFill"></image>
								</view>
								<view class="card-statistics" style="background-color: #bcb2fe; color: #5525c2">
									<view class="card-title">交付完成率</view>
									<view class="card-number">{{ t31Data.DeliveryCompletionRate }}%</view>
									<image class="card-bg" src="@/static/images/home-bg3.png" mode="aspectFill"></image>
								</view>
								<view class="card-statistics" style="background-color: #a0c5fe; color: #155bbc">
									<view class="card-title">平均完工时效</view>
									<view class="card-number">{{ t31Data.AverageCompletionTime }}</view>
									<image class="card-bg" src="@/static/images/home-bg4.png" mode="aspectFill"></image>
								</view>
							</view>

							<view class="statistics-tips" style="margin-top: 50rpx">
								<span class="title">省份-完工项目统计</span>
							</view>
							<zb-table
								:data="gTableData3"
								:columns="[
									{ name: 'province_name', label: '省份', align: 'center', fixed: true },
									{ name: 'SFActualDeliveryNum', label: '实际交付项目数', align: 'center' },
									{ name: 'SFDeliverableNum', label: '应交付项目数', align: 'center' },
									{ name: 'SFDeliveryCompletionRate', label: '交付完成率', align: 'center' },
									{ name: 'SFAverageCompletionTime', label: '平均完工时效', align: 'center' },
									{ name: 'SFFinishOnDaysNum', label: '如期交付项目数 (完工时效)', align: 'center' },
									{ name: 'SFFinishOnDaysRate', label: '如期交付率(完工时效)', align: 'center' },
									{ name: 'SFFinishOnTimeNum', label: '如期交付项目数(完工日期)', align: 'center' },
									{ name: 'SFFinishOnTimeRate', label: `如期交付率(完工日期)`, align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>

							<view class="statistics-tips" style="margin-top: 50rpx">
								<span class="title">工程经理-完工项目统计</span>
							</view>
							<zb-table
								:data="gTableData4"
								:columns="[
									{ name: 'engineering_manager_name', label: '工程经理', align: 'center', fixed: true },
									{ name: 'GCJLActualDeliveryNum', label: '实际交付项目数', align: 'center' },
									{ name: 'GCJLDeliverableNum', label: '应交付项目数', align: 'center' },
									{ name: 'GCJLDeliveryCompletionRate', label: '交付完成率', align: 'center' },
									{ name: 'GCJLAverageCompletionTime', label: '平均完工时效', align: 'center' },
									{ name: 'GCJLFinishOnDaysNum', label: '如期交付项目数 (完工时效)', align: 'center' },
									{ name: 'GCJLFinishOnDaysRate', label: '如期交付率(完工时效)', align: 'center' },
									{ name: 'GCJLFinishOnTimeNum', label: '如期交付项目数(完工日期)', align: 'center' },
									{ name: 'GCJLFinishOnTimeRate', label: `如期交付率(完工日期)`, align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
						</view>
						<!-- 5 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">项目进场时效-工程经理</span>
							</view>
							<zb-table
								:data="gTableData5"
								:columns="[
									{ name: 'engineering_manager_name', label: '工程经理', align: 'center', fixed: true },
									{ name: 'GCJLActualDeliveryNum', label: '实际交付项目数', align: 'center' },
									{ name: 'GCJLStartOnTimeNum', label: '如期进场项目数', align: 'center' },
									{ name: 'GCJLStartOnTimeRate', label: '如期进场率', align: 'center' },
									{ name: 'GCJLAverageEntryTime', label: '平均进场时效', align: 'center' }
								]"
								:stripe="false"
								:fit="true"
								show-summary
								sum-text="合计"
								:summary-method="getSummaries"
							></zb-table>
						</view>
						<!-- 6 -->
						<view class="item-box">
							<view class="statistics-tips">
								<span class="title">项目进场时效-工程经理</span>
							</view>
							<view class="sort-box">
								<zb-table
									:data="gTableData6"
									:columns="[
										{ name: 'engineering_manager_name', label: '工程经理', align: 'center' },
										{ name: 'after_sales_num', label: '售后数量', align: 'center' },
										{ name: 'processing_time', label: '售后时效', align: 'center' }
									]"
									:stripe="false"
									:fit="true"
									show-summary
									sum-text="合计"
									:summary-method="getSummaries"
								></zb-table>
							</view>
						</view>
					</view>
				</u-transition>
			</view>
			<!-- 尾部 -->
			<tabbar slot="bottom"></tabbar>
		</z-paging>
		<!-- 年份查询 -->
		<u-picker
			ref="yearPicker"
			@close="yearPickerShow = false"
			@cancel="yearPickerShow = false"
			:show="yearPickerShow"
			:columns="yearColumns"
			@confirm="pickerConfirm($event, 'year')"
		></u-picker>
		<!-- 客户经理 -->
		<u-picker
			ref="userPicker"
			@close="userPickerShow = false"
			@cancel="userPickerShow = false"
			:show="userPickerShow"
			keyName="name"
			:columns="userColumns"
			@confirm="pickerConfirm($event, 'user')"
		></u-picker>
		<!-- 日期范围 -->
		<u-calendar
			ref="timePicker"
			:maxDate="maxDate"
			:minDate="minDate"
			:defaultDate="defaultDate"
			:monthNum="36"
			@close="timePickerShow = false"
			:show="timePickerShow"
			mode="range"
			@confirm="pickerConfirm($event, 'time')"
		/>
		<!-- 门店类型 -->
		<u-picker
			ref="typePicker"
			@close="typePickerShow = false"
			@cancel="typePickerShow = false"
			:show="typePickerShow"
			keyName="name"
			:columns="typeColumns"
			@confirm="pickerConfirm($event, 'type')"
		></u-picker>
	</view>
</template>

<script>
import qiunDataCharts from '../components/qiun-data-charts/qiun-data-charts.vue';
import zbTable from '../components/zb-table/components/zb-table/zb-table.vue';
export default {
	components: {
		qiunDataCharts,
		zbTable
	},
	data() {
		const d = new Date();
		const year = d.getFullYear();
		let month = d.getMonth() + 1;
		month = month < 10 ? `0${month}` : month;
		const date = d.getDate();
		return {
			scrollableVal: true, //页面滚动
			defaultDate: [`${year}-${month}-${date}`],
			maxDate: `${year}-${month}-${date}`, //日历最大日期
			minDate: `${year - 2}-${month}-${date}`, //日历最小日期
			yearPickerShow: false, //年份查询
			userPickerShow: false, //客户经理查询
			timePickerShow: false, //日期范围查询
			typePickerShow: false, //门店类型查询
			loading: true,
			userInfo: {},
			scrollTop: 0,
			activeIdx: 0,
			tabList: [
				{
					name: '销售看板'
				},
				{
					name: '施工看板'
				}
			],
			// 筛选
			search: {
				year: '',
				user: '',
				time: '',
				type: ''
			},
			t1Data: {
				TotalContractAmount: 0,
				TotalNumberOfSignedProjects: 0,
				MonthlySignedLineChart: {}
			},
			cancelData: [],
			yearColumns: [[]],
			userColumns: [],
			typeColumns: [
				[
					{
						name: '新店',
						id: 1
					},
					{
						name: '改造店',
						id: 2
					},
					{
						name: '翻新店',
						id: 3
					},
					{
						name: '特批新店',
						id: 4
					},
					{
						name: '特批改造店',
						id: 5
					},
					{
						name: '现场对接店',
						id: 6
					}
				]
			],
			// 数据
			ydqyxms: {
				opts: {
					color: ['#949DFD'],
					padding: [15, 5, 0, 0],
					touchMoveLimit: 60,
					enableScroll: true,
					legend: {
						fontColor: '#868686'
					},
					xAxis: {
						itemCount: 4,
						fontColor: '#999999',
						fontSize: '10',
						scrollShow: true,
						scrollColor: '#E6E7E9',
						scrollBackgroundColor: '#F4F4F5',
						axisLineColor: '#DBE4EB'
					},
					yAxis: {
						splitNumber: 4,
						gridType: 'dash',
						dashLength: 3,
						gridColor: '#DBE4EB',
						data: [
							{
								tofix: 1,
								axisLineColor: '#ffffff',
								fontColor: '#999999',
								fontSize: '10'
							}
						]
					},
					extra: {
						tooltip: {
							showArrow: false,
							bgOpacity: 0.6,
							borderRadius: 6
						},
						column: {
							linearType: 'custom',
							customColor: ['#B6CFFF'],
							width: 30,
							barBorderRadius: [6, 6, 6, 6]
						}
					}
				},
				chartData: {}
			},
			ydqyjeqs: {
				opts: {
					color: ['#6299FF'],
					padding: [15, 5, 0, 0],
					touchMoveLimit: 60,
					enableScroll: true,
					legend: {
						fontColor: '#868686'
					},
					xAxis: {
						boundaryGap: 'justify',
						itemCount: 4,
						axisLineColor: '#DBE4EB',
						fontColor: '#999999',
						fontSize: '10',
						scrollShow: true,
						scrollColor: '#E6E7E9',
						scrollBackgroundColor: '#F4F4F5'
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 3,
						gridColor: '#DBE4EB',
						data: [
							{
								unit: 'k',
								min: 0,
								axisLineColor: '#ffffff',
								fontColor: '#999999',
								fontSize: '10'
							}
						]
					},
					extra: {
						tooltip: {
							showArrow: false,
							bgOpacity: 0.6,
							borderRadius: 6
						},
						area: {
							type: 'curve',
							opacity: 0.08,
							// addLine: true,
							// width: 2,
							gradient: false,
							activeType: 'hollow'
						}
					}
				},
				chartData: {}
			},
			qxxmlxtj: {
				opts: {
					color: ['#5291FF', '#3AD0BD', '#FEC371', '#FD706D', '#7485E5', '#87CA8B', '#FFA176', '#6CA8F6'],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					legend: {
						position: 'bottom'
					},
					title: {
						name: '取消总数',
						fontSize: 15,
						color: '#878C9A'
					},
					subtitle: {
						name: '0',
						fontSize: 25,
						color: '#384774'
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 0,
							border: true,
							borderWidth: 3,
							borderColor: '#FFFFFF'
						}
					}
				},
				chartData: {}
			},

			sTableData1: [],
			sTableData2: [],
			sTableData3: [],
			sTableData4: [],
			sTableData5: [],

			// 销售
			t1Data: [],
			t31Data: {
				ActualDeliveryNum: 0,
				AverageCompletionTime: 0,
				DeliverableNum: 0,
				DeliveryCompletionRate: 0
			},
			gTableData1: [],
			gTableData2: [],
			gTableData3: [],
			gTableData4: [],
			gTableData5: [],
			gTableData6: []
		};
	},
	onLoad() {
		// 用户信息
		this.userInfo = uni.getStorageSync('userInfo');

		// 获取当前年之后的10年
		let year = new Date().getFullYear() + 1;
		for (var i = 0; i < 10; i++) {
			year -= 1;
			this.yearColumns[0].push(year);
		}

		if ([10, 1, 2].includes(this.userInfo.position_id)) {
			this.activeIdx = 0;
			// 销售
			this.getAdminList();
			this.monthlyContractAmountTrend();
			this.realTimeProjectSummary();
			this.t3Promise();
			this.pendingSettlementStatistics();
		} else if ([6, 7].includes(this.userInfo.position_id)) {
			this.activeIdx = 1;
			// 施工
			this.constructionProgressStatistics();
			this.constructionProvinceStatistics();
			this.engineeringManagerConstruction();
			this.t3Promise2();
			this.gCJLProjectProgressTimeliness();
			this.gCJLAfterSalesTimeliness();
		}
		setTimeout(() => {
			this.loading = false;
		}, 100);
	},
	onReady() {},
	methods: {
		// 开启/关闭页面滚动
		getTouchStart() {
			this.scrollableVal = false;
		},
		getTouchEnd() {
			this.scrollableVal = true;
		},
		onRefresh() {
			this.search = {
				year: '',
				user: '',
				time: '',
				type: ''
			};
			if (this.activeIdx == 0) {
				this.getAdminList();
				this.monthlyContractAmountTrend();
				this.realTimeProjectSummary();
				this.t3Promise();
				this.pendingSettlementStatistics();
			} else {
				this.constructionProgressStatistics();
				this.constructionProvinceStatistics();
				this.engineeringManagerConstruction();
				this.t3Promise2();
				this.gCJLProjectProgressTimeliness();
				this.gCJLAfterSalesTimeliness();
			}
		},
		pagScroll(e) {
			this.scrollTop = e.detail.scrollTop;
		},
		ydqyxmsStatistics() {
			let _data = this.t1Data.MonthlySignedLineChart;
			let xAxisData = [];
			let seriesData = [];
			Object.keys(_data).map((key) => {
				xAxisData.push(key);
				seriesData.push(_data[key].TotalOrders);
			});
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: xAxisData,
					series: [
						{
							name: '项目数',
							data: seriesData
						}
					]
				};
				this.ydqyxms.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
		ydqyjeqsStatistics() {
			let _data = this.t1Data.MonthlySignedLineChart;
			let xAxisData = [];
			let seriesData = [];
			Object.keys(_data).map((key) => {
				xAxisData.push(key);
				seriesData.push({
					value: _data[key].TotalAmount == 0 ? 0 : Math.floor(_data[key].TotalAmount / 10) / 100,
					zb: _data[key].AmountRatio
				});
			});
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: xAxisData,
					series: [
						{
							name: '合同签约金额',
							data: seriesData
						}
					]
				};
				this.ydqyjeqs.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
		qxxmlxtjStatistics() {
			let total = 0;
			let echartData = [];
			this.cancelData.map((item) => {
				let obj = {
					name: item.cancel_type,
					value: item.cancel_num
				};
				switch (item.cancel_type) {
					case '价格原因':
						echartData[0] = obj;
						break;
					case '客户拒绝沟通':
						echartData[1] = obj;
						break;
					case '工期原因':
						echartData[2] = obj;
						break;
					case '客户自行施工':
						echartData[3] = obj;
						break;
					case '客户失联':
						echartData[4] = obj;
						break;
					case '不可抗力因素':
						echartData[5] = obj;
						break;
					case '其他原因':
						echartData[6] = obj;
						break;
					case '前施工问题影响':
						echartData[7] = obj;
						break;
				}
				total += item.cancel_num;
			});
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
						{
							data: echartData
						}
					]
				};
				this.qxxmlxtj.opts.subtitle.name = total;
				this.qxxmlxtj.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
		getSummaries(param) {
			const { columns, data } = param;

			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '总计';
					return;
				}
				const values = data.map((item) => {
					if (column.filters) {
						return NaN;
					}
					return Number(item[column.name]);
				});
				if (!values.every((value) => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return Math.floor((prev + curr) * 100) / 100;
						} else {
							return Math.floor(prev * 100) / 100;
						}
					}, 0);
				} else {
					sums[index] = '--'; //N/A
				}
			});

			return sums;
		},
		showSelect(type) {
			switch (type) {
				case 'yearPicker':
					this.yearPickerShow = true;
					break;
				case 'userPicker':
					this.userPickerShow = true;
					break;
				case 'timePicker':
					this.timePickerShow = true;
					break;
				case 'typePicker':
					this.typePickerShow = true;
					break;
				default:
			}
		},
		delSelect(type) {
			this.search[type] = '';
			if (type == 'user' || type == 'year') {
				monthlyContractAmountTrend();
			}
			if (type == 'time') {
				if (this.activeIdx == 0) {
					this.t3Promise();
				} else {
					this.t3Promise2();
				}
			}
			if (type == 'type') {
				this.t3Promise2();
			}
		},
		pickerConfirm(e, type) {
			console.log(e, type);
			if (type == 'time') {
				this.search[type] = [e[0], e[e.length - 1]];
				if (this.activeIdx == 0) {
					this.t3Promise();
				} else {
					this.t3Promise2();
				}
			} else {
				this.search[type] = e.value[0];
			}
			if (type == 'user' || type == 'year') {
				this.monthlyContractAmountTrend();
			}
			if (type == 'type') {
				this.t3Promise2();
			}
			switch (type) {
				case 'year':
					this.yearPickerShow = false;
					break;
				case 'user':
					this.userPickerShow = false;
					break;
				case 'time':
					this.timePickerShow = false;
					break;
				case 'type':
					this.typePickerShow = false;
					break;
				default:
			}
		},
		// api-销售
		getAdminList() {
			this.$Api
				.wxGetAdminList({
					page: 1,
					num: 999,
					identity: 1,
					position_id_arr: [2]
				})
				.then((res) => {
					console.log(res, 'getAdminList');
					if (res.code == 200) {
						this.userColumns = [res.data.list];
					}
				});
		},
		// 获取 1
		monthlyContractAmountTrend() {
			this.$hApi
				.monthlyContractAmountTrend({
					account_manager_id: this.search.user.id,
					year: this.search.year
				})
				.then((res) => {
					console.log(res, '月度签约金额趋势/月度签约项目数');
					if (res.code == 200) {
						this.t1Data = res.data;
						this.ydqyxmsStatistics();
						this.ydqyjeqsStatistics();
					}
				});
		},
		// 获取 2
		realTimeProjectSummary() {
			this.$hApi.realTimeProjectSummary({}).then((res) => {
				console.log(res, '月度签约金额趋势/月度签约项目数');
				if (res.code == 200) {
					this.sTableData1 = res.data;
				}
			});
		},
		// 获取 3
		async t3Promise() {
			let search = {};
			let time = this.search.time;
			if (time) {
				search = {
					start_date: time[0],
					end_date: time[1]
				};
			}
			// 获取 3-1
			let signingStatistics = await this.$hApi.signingStatistics(search);
			console.log(signingStatistics, '签约情况统计');
			if (signingStatistics.code == 200) {
				this.sTableData2 = [signingStatistics.data];
			}
			// 获取 3-2
			let storeTypeSigningStatistics = await this.$hApi.storeTypeSigningStatistics(search);
			console.log(storeTypeSigningStatistics, '各类型门店签约情况统计');
			if (storeTypeSigningStatistics.code == 200) {
				this.sTableData3 = storeTypeSigningStatistics.data;
			}
			// 获取 3-3
			let accountManagersMonthlyPerformance = await this.$hApi.accountManagersMonthlyPerformance(search);
			console.log(accountManagersMonthlyPerformance, '客户经理业绩情况月度统计');
			if (accountManagersMonthlyPerformance.code == 200) {
				this.sTableData4 = accountManagersMonthlyPerformance.data;
			}
			// 获取 3-4
			let cancelTypeStatistics = await this.$hApi.cancelTypeStatistics(search);
			console.log(cancelTypeStatistics, '取消项目类型统计');
			if (cancelTypeStatistics.code == 200) {
				this.cancelData = cancelTypeStatistics.data;
				this.qxxmlxtjStatistics();
			}

			this.$refs.paging.complete(true);
		},
		// 获取 4
		pendingSettlementStatistics() {
			this.$hApi.pendingSettlementStatistics({}).then((res) => {
				console.log(res, '待结算尾款情况统计');
				if (res.code == 200) {
					this.sTableData5 = res.data;
				}
			});
		},
		// api-施工
		// 获取 1
		constructionProgressStatistics() {
			this.$hApi.constructionProgressStatistics({}).then((res) => {
				console.log(res, '施工中状态统计');
				if (res.code == 200) {
					let arr = [];
					let count = 0;
					Object.keys(res.data.status_list).map((key) => {
						let item = res.data.status_list[key];
						count += item.constructionProjectNum;
						arr.push({
							name: item.constructionProgressName,
							num: item.constructionProjectNum
						});
					});
					arr.unshift({
						name: '共计',
						num: count
					});
					this.t1Data = arr;
				}
			});
		},
		// 获取 2-1
		constructionProvinceStatistics() {
			this.$hApi.constructionProvinceStatistics({}).then((res) => {
				console.log(res, '施工省份统计');
				if (res.code == 200) {
					this.gTableData1 = res.data;
				}
			});
		},
		// 获取 2-2
		engineeringManagerConstruction() {
			this.$hApi.engineeringManagerConstruction({}).then((res) => {
				console.log(res, '工程经理施工统计');
				if (res.code == 200) {
					this.gTableData2 = res.data;
				}
			});
		},
		// 获取 3
		async t3Promise2() {
			let search = {
				project_type: this.search.type.id
			};
			let time = this.search.time;
			if (time) {
				search.start_date = time[0];
				search.end_date = time[1];
			}
			// 获取 2-1
			let completedProjectData = await this.$hApi.completedProjectData(search);
			console.log(completedProjectData, '完工项目数据');
			if (completedProjectData.code == 200) {
				this.t31Data = completedProjectData.data;
			}
			// 获取 2-2
			let provinceCompletedProjectData = await this.$hApi.provinceCompletedProjectData(search);
			console.log(provinceCompletedProjectData, '省份-完工项目统计');
			if (provinceCompletedProjectData.code == 200) {
				this.gTableData3 = provinceCompletedProjectData.data;
			}
			// 获取 2-3
			let gCJLCompletedProjectData = await this.$hApi.gCJLCompletedProjectData(search);
			console.log(gCJLCompletedProjectData, '工程经理-完工项目统计');
			if (gCJLCompletedProjectData.code == 200) {
				this.gTableData4 = gCJLCompletedProjectData.data;
			}

			this.$refs.paging.complete(true);
		},
		// 获取 4-1
		gCJLProjectProgressTimeliness() {
			this.$hApi.gCJLProjectProgressTimeliness({}).then((res) => {
				console.log(res, '项目进场时效-工程经理');
				if (res.code == 200) {
					this.gTableData5 = res.data;
				}
			});
		},
		// 获取 4-2
		gCJLAfterSalesTimeliness() {
			this.$hApi.gCJLAfterSalesTimeliness({}).then((res) => {
				console.log(res, '项目售后时效-工程经理');
				if (res.code == 200) {
					this.gTableData6 = res.data;
				}
			});
		},
		// tab切换
		tabActive(e) {
			this.$refs.paging.scrollToTop();
			this.activeIdx = e.index;
			this.search = {
				year: '',
				user: '',
				time: '',
				type: ''
			};
			if (e.index == 0) {
				this.getAdminList();
				this.monthlyContractAmountTrend();
				this.realTimeProjectSummary();
				this.t3Promise();
				this.pendingSettlementStatistics();
			} else {
				this.constructionProgressStatistics();
				this.constructionProvinceStatistics();
				this.engineeringManagerConstruction();
				this.t3Promise2();
				this.gCJLProjectProgressTimeliness();
				this.gCJLAfterSalesTimeliness();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'dataBoard.scss';
</style>
